<script setup lang="ts">
import { computed } from "vue";

interface SvgProps {
    name: string,//图标名称
    prefix?: string,// 图标前缀，默认为icon
    size?: string | number,// 图标大小
    fill?: string,//图标颜色
}

const props = withDefaults(defineProps<SvgProps>(), {
    prefix: "icon",
    fill: "var(--el-color-primary)",
    size: "8vmin",
})

const symbolId = computed(() => `#${props.prefix}-${props.name}`)
</script>

<template>
    <svg :style="{ width: `${size}`, height: `${size}`, fill }" aria-hidden="true">
        <use :xlink:href="symbolId" />
    </svg>
</template>

<style scoped></style>
